<template>
  <div class="liveRoomPage">
    <nav class="formSearch">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="状态：" label-width="100px">
          <el-radio-group v-model="listQuery.state" @change="searchTypeChange">
            <el-radio-button
              v-for="item in searchType"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item label="关键字：" label-width="100px">
          <el-input
            v-model="listQuery.search"
            maxlength="20"
            placeholder="请输入直播间名称/ID/主播昵称/微信号"
            class="inputKeyWord"
            style="width: 400px"
          >
            <template #append>
              <el-button :icon="Search" @click="getList" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 20px" type="primary" @click="add">创建直播间</el-button>
        </el-form-item>
      </el-form>
    </nav>
    <section>
      <el-table
        v-loading="tableLoading"
        :data="roomList"
        border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
        tooltip-effect="dark"
        style="width: 100%"
        class="dataTable"
      >
        <el-table-column prop="id" label="直播间id" />
        <el-table-column prop="title" label="直播间标题" />
        <el-table-column prop="anchorNickname" label="主播昵称" />
        <el-table-column prop="anchorWechat" label="主播微信号" />
        <el-table-column prop="startTime" label="直播开始时间" />
        <el-table-column prop="endTime" label="预计结束时间" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="审核状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.state == 0" type="warning"> 待审核 </el-tag>
            <el-tag v-if="scope.row.state == 1" type="success"> 已通过 </el-tag>
            <el-tag v-if="scope.row.state == 2" type="danger"> 未通过 </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="200"
          label="操作"
        >
          <template #default="scope">
            <div class="btnList">
              <el-button v-if="scope.row.state == 1" link type="primary" @click="addPro(scope.row)">导入</el-button>
              <el-button link type="primary" @click="edit(scope.row)">编辑</el-button>
              <el-button link type="primary" @click="seeMore(scope.row)">详情</el-button>
              <el-popconfirm
                title="确认删除？"
                @confirm="del(scope.row)"
              >
                <template #reference>
                  <el-button
                    link
                    type="danger"
                  >删除</el-button>
                </template>
              </el-popconfirm>
              <el-button v-if="scope.row.state == 2" link type="primary" @click="reAudit(scope.row)">重新审核</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="listQuery.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        style="margin: 12px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </section>

    <el-dialog
      v-model="detailsLiveShow"
      :title="'直播间信息'"
      width="50%"
      center
      :close-on-click-modal="false"
    >
      <el-row>
        <el-col :span="12">
          <el-form :model="liveForm" label-width="180px">
            <el-form-item label="直播间标题:">
              {{ liveForm.title }}
            </el-form-item>
            <el-form-item label="直播间id:">
              {{ liveForm.id }}
            </el-form-item>
            <el-form-item label="直播间开始时间:">
              {{ liveForm.startTime }}
            </el-form-item>
            <el-form-item label="背景图:">
              <img :src="liveForm.coverImg" alt="" srcset="" />
            </el-form-item>
            <el-form-item label="直播间类型:">
              {{ liveForm.liveType == 1 ? '推流' : '手机' }}
            </el-form-item>
            <el-form-item label="是否开启点赞:">
              {{ liveForm.closeLike == 0 ? '是' : '否' }}
            </el-form-item>
            <el-form-item label="是否开启评论:">
              {{ liveForm.closeComment == 0 ? '是' : '否' }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :model="liveForm" label-width="180px">
            <el-form-item label="主播微信号:">
              {{ liveForm.anchorWechat }}
            </el-form-item>
            <el-form-item label="主播昵称:">
              {{ liveForm.anchorNickname }}
            </el-form-item>
            <el-form-item label="直播间结束时间:">
              {{ liveForm.endTime }}
            </el-form-item>
            <el-form-item label="分享图:">
              <img :src="liveForm.shareImg" alt="" srcset="" />
            </el-form-item>
            <el-form-item label="是否开启回放:">
              {{ liveForm.closePlayback == 0 ? '是' : '否' }}
            </el-form-item>
            <el-form-item label="是否开启预约:">
              {{ liveForm.closeAppointment == 0 ? '是' : '否' }}
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div>
        <el-table
          :data="roomProList"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="productImage" label="商品图片">
            <template #default="scope">
              <img
                style="width: 40px; height: 40px"
                :src="scope.row.productImage"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="stockNumber" label="库存" />
          <el-table-column label="价格">
            <template #default="scope">
              <span v-if="scope.row.priceType == 1">
                一口价: {{ scope.row.fixedPrice }}
              </span>
              <span v-if="scope.row.priceType == 2">
                最低价：{{ scope.row.minPrice }} <br />
                最高价：{{ scope.row.maxPrice }}
              </span>
              <span v-if="scope.row.priceType == 3">
                现价: {{ scope.row.marketPrice }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="saleNumber" label="销售数量" />
          <el-table-column prop="saleAmount" label="销售金额" />
        </el-table>
        <el-pagination
          v-model:current-page="proListQuery.page"
          style="margin-top: 20px"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="proListQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="proTotal"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        />
      </div>
      <div v-if="liveForm.remark" style="text-align: center; margin-top: 20px">
        <span style="color: red">备注：</span>
        {{ liveForm.remark }}
      </div>
    </el-dialog>
    <!--表单组件-->
    <el-dialog
      v-model="addLiveShow"
      :close-on-click-modal="false"
      :title="liveShowState == 1 ? '创建直播间' : '编辑直播间'"
      width="800px"
      center
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="140px"
      >
        <el-form-item label="直播间标题" prop="title">
          <el-input
            v-model="form.title"
            maxlength="20"
            placeholder="请输入直播间标题"
            style="width: 370px"
            :disabled="isDisabled"
          />
        </el-form-item>
        <el-form-item label="直播间背景图" prop="coverImg">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader1"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview1"
            >
              <img v-if="form.coverImg" :src="form.coverImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
          <p class="tips">直播间背景图，图片规则：建议像素1080*1920，大小不超过2M</p>
        </el-form-item>
        <el-form-item label="直播间分享图片" prop="shareImg">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader2"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview2"
            >
              <img v-if="form.shareImg" :src="form.shareImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><el-icon-plus /></el-icon>
            </el-upload>
          </div>
          <p class="tips">
            直播分享图 ，建议像素800*640，大小不超过1M
          </p>
        </el-form-item>
        <el-form-item label="封面图" prop="feedsImg">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader3"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview3"
            >
              <img v-if="form.feedsImg" :src="form.feedsImg" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
          <p class="tips">购物直播封面图 ，建议尺寸800*800</p>
        </el-form-item>
        <el-form-item label="计划直播开始时间" prop="startTime">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="请选择开始时间"
            style="width: 370px"
            :disabled="isDisabled"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <p class="tips">
            开播时间需要在当前时间的50分钟左右,并且开始时间不能在6个月后
          </p>
        </el-form-item>
        <el-form-item label="计划直播结束时间" prop="endTime">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="请选择结束时间"
            style="width: 370px"
            :disabled="isDisabled"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <p class="tips">
            开播时间和结束时间间隔不得短于30分钟,不得超过24小时
          </p>
        </el-form-item>
        <el-form-item
          label="主播昵称"
          prop="anchorNickname"
          :disabled="isDisabled"
        >
          <el-input
            v-model="form.anchorNickname"
            placeholder="请输入主播昵称"
            maxlength="20"
            style="width: 370px"
            :disabled="isDisabled"
          />
        </el-form-item>
        <el-form-item
          label="主播微信号"
          prop="anchorWechat"
          :disabled="isDisabled"
        >
          <el-input
            v-model="form.anchorWechat"
            placeholder="请输入主播微信号"
            maxlength="20"
            style="width: 370px"
            :disabled="isDisabled"
          />
          <p class="tips">
            主播微信号需要实名，搜索微信官方小程序【小程序直播】进行认证
          </p>
        </el-form-item>
        <el-form-item label="主播头像" prop="anchorImge">
          <div class="uploadWidth">
            <el-upload
              class="avatar-uploader3"
              :headers="headers"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handlePictureCardPreview4"
            >
              <img
                v-if="form.anchorHeadImg"
                :src="form.anchorHeadImg"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="直播间类型" prop="liveType">
          <el-radio-group v-model="form.liveType" :disabled="isDisabled">
            <el-radio :label="1" class="radio">推流</el-radio>
            <el-radio :label="0">手机直播</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="横屏、竖屏" prop="screenType">
          <el-radio-group v-model="form.screenType" :disabled="isDisabled">
            <el-radio :label="1" class="radio">横屏</el-radio>
            <el-radio :label="0">竖屏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭点赞" prop="closeLike">
          <el-radio-group v-model="form.closeLike" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭货架" prop="closeGoodsShelf">
          <el-radio-group v-model="form.closeGoodsShelf" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭评论" prop="closeComment">
          <el-radio-group v-model="form.closeComment" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否关闭回放" prop="closePlayback">
          <el-radio-group v-model="form.closePlayback" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否关闭分享" prop="closeShare">
          <el-radio-group v-model="form.closeShare" :disabled="isDisabled">
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="是否关闭客服" prop="closeService">
            <el-radio-group v-model="form.closeService" :disabled="isDisabled">
              <el-radio :label="1" class="radio">关闭</el-radio>
              <el-radio :label="0">开启</el-radio>
            </el-radio-group>
          </el-form-item> -->
        <el-form-item label="是否关闭预约" prop="closeAppointment">
          <el-radio-group
            v-model="form.closeAppointment"
            :disabled="isDisabled"
          >
            <el-radio :label="1" class="radio">关闭</el-radio>
            <el-radio :label="0">开启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addLiveShow = false">取 消</el-button>
          <el-button
            v-if="liveShowState == 1"
            type="primary"
            :loading="submitLoading"
            :disabled="isDisabled"
            @click="submitCU(formRef)"
          >确 认</el-button>
          <el-button
            v-if="liveShowState == 2"
            type="primary"
            :loading="submitLoading"
            :disabled="isDisabled"
            @click="submitCU(formRef)"
          >保 存</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 导入商品 -->
    <el-dialog
      v-model="addProShow"
      title="导入商品"
      width="60%"
      center
      :close-on-click-modal="false"
    >
      <el-form
        :inline="true"
        :model="proListPassQuery"
      >
        <el-form-item class="inputWide" label="关键字">
          <el-input
            v-model="proListPassQuery.search"
            maxlength="20"
            placeholder="请输入关键字搜索"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="getProPassList">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table
          :data="proListPassData"
          border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="productId" label="商品ID" />
          <el-table-column prop="productImage" label="商品图片">
            <template #default="scope">
              <img
                style="width: 40px; height: 40px"
                :src="scope.row.productImage"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="商品名称" />
          <el-table-column prop="stockNumber" label="库存" />
          <el-table-column label="价格">
            <template #default="scope">
              <span v-if="scope.row.priceType == 1">
                一口价: {{ scope.row.fixedPrice }}
              </span>
              <span v-if="scope.row.priceType == 2">
                最低价：{{ scope.row.minPrice }} <br />
                最高价：{{ scope.row.maxPrice }}
              </span>
              <span v-if="scope.row.priceType == 3">
                现价: {{ scope.row.marketPrice }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="proListPassQuery.page"
          style="margin-top: 20px"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="proListPassQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="proListPassTotal"
          @size-change="handleSizeChange3"
          @current-change="handleCurrentChange3"
        />
      </div>
      <!-- 新增用户 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addProShow = false">取 消</el-button>
          <el-button type="primary" @click="addproSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { Plus, Search } from '@element-plus/icons-vue'
import {
  liveGetList,
  liveGetProduct,
  addLiveSave,
  updateLive,
  deleteLive,
  liveProGetAll,
  importProduct,
  reExamine,
} from '@/api/live'
import { WXuploadUrl } from '@/utils/request'
import { getToken } from '@/utils/auth.js'

const uploadUrl = WXuploadUrl
const headers = {
  'Authorization-business': getToken()
}
const searchType = [
  {
    label: '全部',
    value: 'null'
  },
  {
    label: '待审核',
    value: 0
  },
  {
    label: '审核已通过',
    value: 1
  },
  {
    label: '审核未通过',
    value: 2
  }
]
const tableLoading = ref(false)
const listQuery = ref({
  state: null,
  search: '',
  page: 1,
  pageSize: 10,
  shopId: null
})
const proListQuery = ref({
  liveId: null,
  page: 1,
  pageSize: 10,
  shopId: null
})
const formRef = ref(null)
const submitLoading = ref(false)
// 直播间列表
const roomList = ref([])
// 直播相关产品列表
const roomProList = ref([])
const total = ref(0)
const proTotal = ref(0)
const detailsLiveShow = ref(false)
const activeName = ref('first')
const disabled = ref(false)
// 添加直播间
const liveForm = ref({})
// 添加直播间部分
const addLiveShow = ref(false)
const isDisabled = ref(false)
const liveShowState = ref(false)
const form = ref({
  anchorHeadImg: '',
  anchorNickname: '',
  anchorWechat: '',
  coverImg: '',
  coverMediaId: '',
  closeAppointment: 0,
  closeComment: 0,
  closeGoodsShelf: 0,
  closeLike: 0,
  closePlayback: 0,
  closeService: 0,
  closeShare: 0,
  feedsImg: '',
  feedsMediaId: '',
  endTime: '',
  id: 0,
  liveType: 0,
  remark: '',
  screenType: 0,
  shareImg: '',
  shareMediaId: '',
  shopId: 0,
  startTime: '',
  state: 0,
  title: ''
})
const rules = ref({
  title: [
    { required: true, message: '直播间标题不能为空', trigger: 'blur' },
    {
      min: 3,
      max: 17,
      message: '最短3个汉字，最长17个汉字',
      trigger: 'blur',
    },
  ],
  coverImg: [
    { required: true, message: '背景图不能为空', trigger: 'blur' }
  ],
  feedsImg: [
    { required: true, message: '封面图不能为空', trigger: 'blur' }
  ],
  shareImg: [
    { required: true, message: '分享图片不能为空', trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: '开始时间不能为空', trigger: 'blur' }
  ],
  endTime: [
    { required: true, message: '预计结束时间不能为空', trigger: 'blur' }
  ],
  anchorNickname: [
    { required: true, message: '主播昵称不能为空', trigger: 'blur' },
    {
      min: 2,
      max: 15,
      message: '最短2个汉字，最长15个汉字',
      trigger: 'blur'
    }
  ],
  anchorWechat: [
    { required: true, message: '主播微信号不能为空', trigger: 'blur' }
  ],
  liveType: [
    {
      required: true,
      message: '直播间类型 1：推流 0：手机直播不能为空',
      trigger: 'blur'
    }
  ],
  screenType: [
    {
      required: true,
      message: '横屏、竖屏 【1：横屏，0：竖屏】不能为空',
      trigger: 'blur'
    }
  ],
  closeGoodsShelf: [
    {
      required: true,
      message: '是否关闭货架 【0：开启，1：关闭】不能为空',
      trigger: 'blur'
    }
  ],
  closeComment: [
    {
      required: true,
      message: '是否关闭评论 【0：开启，1：关闭】不能为空',
      trigger: 'blur'
    }
  ],
  closeAppointment: [
    {
      required: true,
      message: '是否关闭预约 【0：开启，1：关闭】不能为空',
      trigger: 'blur'
    }
  ]
})
const addProShow = ref(false)
const proListPassData = ref([])
const proListPassQuery = ref({
  liveId: null,
  page: 1,
  pageSize: 10,
  shopId: null,
  search: null
})
const proListPassTotal = ref(0)
const proPassFrom = ref({
  liveId: null,
  liveProductIdList: [],
  shopId: null
})
const isAllow = ref(true)

onBeforeMount(() => {
  getList()
})
// 获取直播间列表
const getList = () => {
  tableLoading.value = true
  liveGetList(listQuery.value).then(res => {
    total.value = res.data.total
    roomList.value = res.data.list
  }).finally(() => {
    tableLoading.value = false
  })
}
// 获取直播间相关产品信息
const getProList = async () => {
  proListQuery.value.shopId = liveForm.value.shopId
  proListQuery.value.liveId = liveForm.value.id
  const res = await liveGetProduct(proListQuery.value)
  roomProList.value = res.data.list
  proTotal.value = res.data.total
}
const seeMore = (row) => {
  liveForm.value = row
  detailsLiveShow.value = true
  getProList()
}
const del = (row) => {
  ElMessageBox.confirm('是否确认删除该内容?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteLive(row)
      .then((res) => {
        ElMessage.success('删除成功')
        getList()
      })
      .catch((err) => {
        ElMessage.error(err.msg)
      })
  })
}
// 选择查询状态
const searchTypeChange = (e) => {
  listQuery.value.state = e
  getList()
}
// 分页
const handleCurrentChange = (e) => {
  listQuery.value.page = e
  getList()
}
const handleSizeChange = (e) => {
  listQuery.value.pageSize = e
  getList()
}
const handleCurrentChange1 = (e) => {
  proListQuery.value.page = e
  getProList()
}
const handleSizeChange1 = (e) => {
  proListQuery.value.pageSize = e
  getProList()
}
// 添加直播间
// 图片上传
const handlePictureCardPreview1 = (file) => {
  console.log(file)
  if (file.code === '200') {
    form.value.coverImg = file.data.url
    form.value.coverMediaId = file.data.mediaId
  } else {
    ElMessage.error('图片超出规定像素，上传失败！')
  }
}
const handlePictureCardPreview2 = (file) => {
  if (file.code === '200') {
    form.value.shareImg = file.data.url
    form.value.shareMediaId = file.data.mediaId
  } else {
    ElMessage.error('图片超出规定像素，上传失败！')
  }
}
const handlePictureCardPreview3 = (file) => {
  if (file.code === '200') {
    form.value.feedsImg = file.data.url
    form.value.feedsMediaId = file.data.mediaId
  } else {
    ElMessage.error('图片超出规定像素，上传失败！')
  }
}
const handlePictureCardPreview4 = (file) => {
  if (file.code === '200') {
    form.value.anchorHeadImg = file.data.url
  } else {
    ElMessage.error('图片超出规定像素，上传失败！')
  }
}
const add = () => {
  addLiveShow.value = true
  liveShowState.value = 1
  form.value = {
    anchorHeadImg: '',
    anchorNickname: '',
    anchorWechat: '',
    coverImg: '',
    coverMediaId: '',
    closeAppointment: 0,
    closeComment: 0,
    closeGoodsShelf: 0,
    closeLike: 0,
    closePlayback: 0,
    closeService: 0,
    closeShare: 0,
    feedsImg: '',
    feedsMediaId: '',
    endTime: '',
    id: 0,
    liveType: 0,
    remark: '',
    screenType: 0,
    shareImg: '',
    shareMediaId: '',
    shopId: 0,
    startTime: '',
    state: 0,
    title: '',
  }
}
const edit = (row) => {
  addLiveShow.value = true
  liveShowState.value = 2
  const data = Object.assign({}, row)
  form.value = data
}
// 添加直播间
const submitCU = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      submitLoading.value = true
      if (liveShowState.value === 1) {
        try {
          addLiveSave(form.value).then((res) => {
            if (res.code === '') {
              ElMessage({
                message: '创建成功',
                type: 'success',
              })
              addLiveShow.value = false
              getList()
            }
          })
        } finally {
          submitLoading.value = false
        }
      } else {
        try {
          updateLive(form.value).then((res) => {
            if (res.code === '') {
              ElMessage({
                message: '修改成功',
                type: 'success',
              })
              addLiveShow.value = false
              getList()
            }
          })
        } finally {
          submitLoading.value = false
        }
      }
    } else {
      return false
    }
  })
}
// 导入商品
const addPro = (row) => {
  proPassFrom.value.liveId = row.id
  proPassFrom.value.shopId = row.shopId
  proListPassQuery.value.search = ''
  proListPassQuery.value.liveId = row.id
  proListPassQuery.value.shopId = row.shopId
  addProShow.value = true
  getProPassList()
}
const getProPassList = async () => {
  proListPassQuery.value.state = 1
  const res = await liveProGetAll(proListPassQuery.value)
  proListPassTotal.value = res.data.total
  proListPassData.value = res.data.list
}
const handleSizeChange3 = (e) => {
  proListPassQuery.value.pageSize = e
  getProPassList()
}
const handleCurrentChange3 = (e) => {
  proListPassQuery.value.page = e
  getProPassList()
}
// 选中的
const handleSelectionChange = (val) => {
  proPassFrom.value.liveProductIdList = val.map((el) => {
    return el.id
  })
}
// 导入操作
const addproSubmit = () => {
  if (proPassFrom.value.liveProductIdList.length === 0) {
    ElMessage.warning('请选择导入的商品')
  } else {
    importProduct(proPassFrom.value).then((res) => {
      if (res.code === '') {
        ElMessage({
          message: '导入成功',
          type: 'success',
        })
        addProShow.value = false
        getList()
      }
    })
  }
}
// 重新审核
const reAudit = (row) => {
  reExamine({ id: row.id }).then((res) => {
    if (res.code === '') {
      ElMessage.success('已重新提交')
      getList()
    }
  })
}
</script>

<style lang="scss" scpoed>
img {
  width: 100px;
  height: 100px;
}
.liveRoomPage {
  padding: 20px;
  margin-top: 20px;
  background-color: #FFFFFF;
  nav {
    .search {
      line-height: 40px;
      margin: 10px 0;
      display: flex;
      .title {
        min-width: 120px;
        text-align: right;
      }
      .inputKeyWord {
        max-width: 400px;
        min-width: 200px;
      }
    }
  }
  section {
    padding: 12px 8px;
    background-color: #fff;
    // .pagination {
    //   margin-top: 30px;
    // }
  }
}
.el-form {
  .el-form-item {
    margin-bottom: 22px;
  }
  .el-form-item__label {
    font-weight: 700;
  }
  .el-form-item__content {
    display: block;
    .tips {
      font-size: 13px;
      line-height: 1.5;
      color: #8c939d;
    }
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader1 {
  border: 1px dashed #d9d9d9;
  width: 108px;
  height: 192px;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 108px;
    height: 192px;
    line-height: 192px;
    text-align: center;
  }
  .avatar {
    width: 108px;
    height: 192px;
    display: block;
  }
}

.avatar-uploader2 {
  border: 1px dashed #d9d9d9;
  width: 180px;
  height: 148px;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 180px;
    height: 148px;
    display: block;
  }
}

.avatar-uploader3 {
  border: 1px dashed #d9d9d9;
  width: 140px;
  height: 140px;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }
}
</style>
